<template>
    <div class="add-order">
        <nav-bar title="添加订单"></nav-bar>
        <div class="address-list">
            <div class="address-item" v-for="item in addressList" :key="item.id">
                <div class="choose-box">
                    <van-radio-group v-model="addressId" @change="changeAddress(item)">
                        <van-radio :name="item.id"></van-radio>
                    </van-radio-group>
                </div>
                <div class="address-box">
                    <div class="address-detail">{{ item.address }}</div>
                    <div class="user-info">
                        <span>{{ item.name }}</span>
                        <span>{{ item.phone }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-box">
            <div class="commodity-list">
                <div class="commodity-item" v-for="item in orderCommodityListVO.orderCommodityList" :key="item.commodityId">
                    <div class="image-box">
                        <img :src="item.img">
                    </div>
                    <div class="name">
                        {{ item.name }}
                    </div>

                    <div class="price">
                        {{ item.price }}￥
                    </div>
                    <div class="number">
                        x{{ item.commodityNumber }}
                    </div>
                </div>
            </div>

            <div class="total-price">
                总价：{{ totalPrice }}￥
            </div>
        </div>

        <div class="coupon-box">
            <!-- 优惠券单元格 -->
            <van-coupon-cell :coupons="coupons" :chosen-coupon="chosenCoupon" @click="showList = true" />

            <!-- 优惠券列表 -->
            <van-popup v-model="showList" round position="bottom" style="height: 90%; padding-top: 4px;">
                <van-coupon-list :coupons="coupons" :chosen-coupon="chosenCoupon" :disabled-coupons="disabledCoupons"
                    @change="onChange" @exchange="onExchange" />
            </van-popup>
        </div>

        <div>
            <van-action-sheet v-model="showPay" title="支付">
                <div class="pay-box">
                    <div class="price-box">
                        <span v-if="coupons[chosenCoupon]">
                            ￥{{ totalPrice - coupons[chosenCoupon].value / 100}} 
                        </span>

                        <span v-else>
                            ￥{{ totalPrice }}
                        </span>
                    </div>
                    <van-radio-group v-model="payType">
                        <van-cell-group>
                            <van-cell title="支付宝" clickable @click="payType = '1'">
                                <template #right-icon>
                                    <van-radio name="1" />
                                </template>
                            </van-cell>
                            <van-cell title="微信" clickable @click="payType = '2'">
                                <template #right-icon>
                                    <van-radio name="2" />
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </van-radio-group>
                    <div class="pay-button">
                        <van-button type="info" style="width:80%;" round @click="pay">立即支付</van-button>
                    </div>
                </div>
            </van-action-sheet>
        </div>

        <div class="button-box">
            <van-button>取消订单</van-button>
            <van-button type="info" @click="showPay = true">立即支付</van-button>
        </div>
    </div>
</template>

<script>
import NavBar from '@/components/navbar/NavBar.vue'

import couponAPI from '@/api/coupon'
import orderAPI from '@/api/order'
import addressAPI from '@/api/address'

export default {

    components: {
        NavBar,
    },
    data() {
        return {
            storeId: null,
            orderCommodityListVO: {},
            totalPrice: 0,
            addressList: [],
            theAddress: {
                id: null,
            },
            addressId: null,
            showPay: false,
            showList: false,
            chosenCoupon: -1,
            coupons: [],
            disabledCoupons: [],
            payType: null,
        }
    },
    created() {
        this.orderCommodityListVO = JSON.parse(sessionStorage.getItem("orderCommodityListVO"))

        this.storeId = sessionStorage.getItem("storeId")
        let orderCommodityList = this.orderCommodityListVO.orderCommodityList
        this.totalPrice = 0
        for (let i = 0; i < orderCommodityList.length; i++) {

            this.totalPrice += orderCommodityList[i].amount
        }

        this.getAddressList(1)
        this.getCoupon(this.storeId)
    },
    methods: {
        getAddressList(current) {
            let data = {
                current
            }
            addressAPI.getAddress(data)
                .then(res => {
                    if (res.code == 200) {
                        this.$toast(res.message)
                        this.addressList = res.data.addressList.records

                        this.theAddress = this.addressList[0]
                    } else this.$toast(res.message)
                })
        },
        addOrder() {

            orderAPI.addOrder(orderCommodityListVO)
                .then(res => {
                    if (res.code == 200) {
                        this.$toast(res.message)
                        console.log(res.data)
                    } else this.$toast(res.message)
                })
        },
        getCoupon(storeId) {

            couponAPI.getCouponByStoreId(storeId)
                .then(res => {
                    if (res.code == 200) {
                        this.couponMapping(res.data.userStoreActivityList)
                    } else this.$toast(res.message)
                })
        },
        couponMapping(dataList) {
            for (let i = 0; i < dataList.length; i++) {
                let data = dataList[i]
                let coupon = {}

                coupon.id = data.userStoreActivity.id
                coupon.available = data.userStoreActivity.status
                coupon.value = data.storeActivity.discountAmount * 100
                coupon.name = `满${data.storeActivity.amount}元 - ${data.storeActivity.discountAmount}元`
                coupon.condition = data.overall == 1 ? '无使用门槛' : '仅限本店'
                coupon.valueDesc = data.storeActivity.amount
                coupon.unitDesc = '元'
                coupon.customValidPeriod = `${data.storeActivity.startTime} - ${data.storeActivity.endTime}`

                if (coupon.available == 1) this.coupons.push(coupon)
                else{
                    let reason = {
                        2: '已使用',
                        3: '已过期',
                        4: '不可用',
                    }
                    coupon.reason = reason[coupon.available]
                    this.disabledCoupons.push(coupon)
                }
            }
        },
        pay(){
            this.orderCommodityListVO.addressId = this.addressId
            this.orderCommodityListVO.storeId = this.storeId
            if(this.coupons[this.chosenCoupon])
                this.orderCommodityListVO.userStoreActivityId = this.coupons[this.chosenCoupon].id

            orderAPI.addOrder(this.orderCommodityListVO)
            .then(res => {
                if(res.code == 200){
                    this.$toast(res.message)
                }else this.$toast(res.message)
            })
        },
        changeAddress(address) {
            this.setTheAddress(address)
        },
        setTheAddress(address) {
            this.theAddress = address
        },
        onChange(index) {
            this.showList = false;
            this.chosenCoupon = index;
        },
        onExchange(code) {
            this.coupons.push(coupon);
        },
    },

    destroyed() {
        // sessionStorage.removeItem("orderCommodityListVO")
    },
}
</script>

<style scoped>
.add-order {
    background-color: white;
}

.add-order>div {
    padding: 0 10px;

}

.order-box {

    background-color: white;
}


.address-item {
    display: flex;
    align-items: center;

    padding: 5px;
    border-bottom: 1px solid rgb(135, 133, 133, 0.4);
}

.address-item .address-box {
    margin-left: 20px;
    flex: 1;
}

.address-item .address-box>div {
    margin-top: 5px;
}

.address-box .user-info span {
    margin-right: 5px;
}


.image-box {
    width: 50px;
    height: 50px;
}

.image-box img {
    width: 100%;
    height: 100%;
}

.commodity-item {
    display: flex;

    align-items: center;
    justify-content: space-around;

    margin-top: 10px;
}

.total-price {
    text-align: right;


}

.pay-box {
    margin-bottom: 10px;
}

.price-box{
    font-size: 22px;
    padding:10px;
}

.button-box {
    position: fixed;
    bottom: 10px;
    left: 0px;
    width: 95%;

    margin-top: 10px;

    display: flex;
    justify-content: space-between;
}
</style>